<template>
  <div>
    <div class="search-area-wrap" v-if="searchShow">
      <el-form label-position="right" label-width="30%">
        <el-row :gutter="24">
          <slot>
          </slot>
          <el-col :span="8" style="float: right;">
            <el-button icon="el-icon-search" type="primary" class="table-search-btn" @click="search"> 搜索</el-button>
            <el-button icon="el-icon-refresh-right" class="table-reset-btn" @click="reset"> 重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="operate-area-wrap">
      <el-button icon="el-icon-search" class="search" circle @click="searchShow?searchShow=false:searchShow=true">
      </el-button>
      <div class="menu">
        <OperateBtnGroup v-bind="$attrs" v-on="$listeners"></OperateBtnGroup>
      </div>

    </div>
  </div>
</template>

<script>
  import SearchBox from '@/components/SearchBox/index'
  import OperateBtnGroup from '@/components/OperateBtnGroup/index'

  export default {
    name: 'OperateArea',
    components: {
      OperateBtnGroup
    },
    inheritAttrs: false,
    data() {
      return {
        searchShow: false
      }
    },
    created() {},
    methods: {
      search() {
        this.$emit('search')
      },
      reset() {
        this.$emit('reset')
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~@/assets/styles/variables";

  .operate-area-wrap {
    width: 100%;
    height: 36px;
    margin: 0 0 3px 0;
  }

  .table-search-btn {
    background-color: #20b2aa;
    border-color: #20b2aa;
  }

  .search-area-wrap {
    width: 100%;
    margin: 0 0 3px 0;

    .btn {
      background-color: $operateBtnBack;
      border: 0;
    }
  }

  .menu {
    width: auto;
    height: 36px;
    float: left;
  }

  .search {
    width: auto;
    height: 36px;
    padding: 2px 0;
    float: right;
  }

  @media (max-width: 1360px) {
    .operate-area-wrap {
      height: 32px;
      margin: 0 0 6px 0;
    }

    .menu {
      height: 32px;
      margin-right: 10px;
    }

    .search {
      margin-right: 10px;
      padding-top: 9px;
      border: 0px;
    }
  }

  ::v-deep .el-form-item--small .el-form-item__label {
    text-align: right;
    padding: 0 10px 0px 0;
    font-weight: bold;
    vertical-align: middle;
    line-height: 30px;
  }
</style>
